<template>
  <van-tabs v-model="active" @change="onChange" swipeable sticky animated>
    <van-tab title="已买入" :badge="counts.took">
      <slot name="tab0"></slot>
    </van-tab>
    <van-tab title="冻结中" :badge="counts.frozen">
      <slot name="tab1"></slot>
    </van-tab>
    <van-tab title="已完成" :badge="counts.unfreeze">
      <slot name="tab2"></slot>
    </van-tab>
  </van-tabs>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      active: this.value,
      counts: {
        took: '',
        frozen: '',
        unfreeze: '',
      },
    }
  },
  created() {
    this.getStatis()
  },
  methods: {
    onChange(val) {
      this.$emit('input', val)
      this.getStatis()
    },
    getStatis() {
      this.axios.get('/my/buys/statis').then(res => {
        this.counts = {
          took: '',
          frozen: '',
          unfreeze: '',
          ...res.data.data,
        }
      })
    },
  },
}
</script>

<style>
</style>